<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 没有this绑定
    // es5中的this指向：取决于调用该函数的上下文对象
    // let PageHandle = {
    //     id:123,
    //     init:function (){
    //         document.addEventListener('click',function (event){
    //             // 此时this指向document
    //             console.log(this);
    //             this.doSomeThings(event.type);
    //         })
    //     },
    //     doSomeThings:function (type){
    //         console.log(`当前事件类型：${type},当前id:${this.id}`)
    //     }
    // }
    let PageHandle = {
        id:123,
        init:function (){
            document.addEventListener('click',function (event){
                // 通过bind来绑定this
                console.log(this);
                this.doSomeThings(event.type);
            }.bind(this))
        },
        doSomeThings:function (type){
            console.log(`当前事件类型：${type},当前id:${this.id}`)
        }
    }
    PageHandle.init();

    // es6 箭头函数没有this指向，箭头函数内部this值只能通过查找作用域链来确定，一旦使用箭头函数，当前就不存在作用域
    let PageHandle2 = {
        id:456,
        //找到作用域链
        init:function (){
            document.addEventListener('click',(event) => {
                // 无作用域链继续向上找
                console.log(this);
                this.doSomeThings(event.type);
            })
        },
        doSomeThings:function (type){
            console.log(`当前事件类型：${type},当前id:${this.id}`)
        }
    }
    PageHandle2.init();

    let PageHandle3 = {
        id:456,
        init:() => {
            document.addEventListener('click',(event) => {
                // 此时this指向window
                console.log(this);
                this.doSomeThings(event.type);
            })
        },
        doSomeThings:function (type){
            console.log(`当前事件类型：${type},当前id:${this.id}`)
        }
    }
    PageHandle3.init();

    // 使用箭头函数的注意事项

    // 1.使用箭头函数，内部不存在arguments（无作用域链指向window）
    let getVal = () => {

        console.log(arguments);
    }

    // 2.箭头函数不能使用new关键字来实例化对象
    let Person = () => {

    };
    // function函数也是一个对象，但是箭头函数不是一个对象，它其实就是一个表达式或语法糖
    let p = new Person();
</script>
</body>
</html>